<template>
	<div class="itemTable">
		<h2>{{title}}</h2>
		<el-table :data="itemKills" stripe style="width: 80%;margin: 10px auto;">
			<el-table-column prop="itemName" label="商品名称">
			</el-table-column>
			<el-table-column prop="startTime" label="开始时间">
			</el-table-column>
			<el-table-column prop="endTime" label="结束时间">
			</el-table-column>
			<el-table-column label="操作" prop="canKill">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" v-if="scope.row.canKill == 1" @click="handleEdit(scope.$index, scope.row.itemId)">详情</el-button>
					<el-button size="mini" type="primary" v-else>抢购结束或未开始</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: '秒杀业务实战',
				itemKills: [{
					itemId: 1001,
					itemName: '卫龙辣条',
					total: 10,
					startTime: '2021-12-01 20:10:10',
					endTime: '2021-12-07 05:14:23',
					canKill: 1
				},{
					itemId: 1002,
					itemName: '死神辣条',
					total: 5,
					startTime: '2021-12-07 12:01:10',
					endTime: '2021-12-09 09:25:15',
					canKill: 0
				}]
			}
		},
		created: function() {
			var that = this;
			this.$http.get('/').then(function(res) {
				if(res.data.code == 200){
					console.log(res.data.data);
					that.itemKills = res.data.data;
				}
			}).catch(function(err) {
				console.log("err", err);
			})
		},
		methods: {
			handleEdit(index, itemId) {
				this.$router.push({ path:'/detail',query:{itemId:itemId} });
			}
		}
	}
</script>

<style scoped>

</style>
